<template>
  <view class="clock-in-page">
    <!-- 上下班事项小卡片 -->
    <view class="todo-card">
      <view class="todo-card-tabs">
        <view :class="['todo-card-tab', todoCardType === 1 ? 'active' : '']" @click="todoCardType = 1">上班后事项</view>
        <view :class="['todo-card-tab', todoCardType === 2 ? 'active' : '']" @click="todoCardType = 2">下班后事项</view>
        <view class="todo-card-edit" @click="openEditTodoCard">编辑</view>
      </view>
      <view v-if="todoCardList.length === 0" class="todo-card-empty">暂无事项</view>
      <view v-else class="todo-card-list">
        <view v-for="(item, idx) in todoCardList" :key="idx" class="todo-card-item">
          <view class="todo-card-checkbox" @click="toggleCardTodoComplete(idx, item)">
            <uni-icons 
              :type="item.completed ? 'checkbox-filled' : 'circle'" 
              size="22" 
              :color="item.completed ? '#ff7e2d' : '#bbb'"
            />
          </view>
          <text class="todo-card-text" :class="{ 'completed': item.completed }">{{ item.text }}</text>
        </view>
      </view>
    </view>
    <view class="header-bar">
      <text class="title">打卡记录</text>
      <button class="add-btn" @click="openAddPopup">
        <uni-icons class="add-icon" type="plusempty" size="32" color="#fff" /> 打卡
      </button>
    </view>
    
    <!-- 添加日期筛选 -->
    <view class="filter-bar">
      <picker mode="date" :value="selectedDate" @change="onDateChange">
        <view class="date-picker">
          <text>{{ formatDate(selectedDate) }}</text>
          <uni-icons type="calendar" size="20" color="#666" />
        </view>
      </picker>
    </view>

    <scroll-view class="clock-list" scroll-y>
      <view v-for="item in filteredClockIns" :key="item.id" class="clock-item" @click="openDetailPopup(item)">
        <view class="clock-info">
          <view class="clock-id">#{{ item.id }}</view>
          <view class="clock-name">{{ userInfo.username }}</view>
          <view class="clock-desc">
            {{ item.clock_type }} - {{ formatDateTime(item.clock_time) }}
            <text v-if="isToday(item.clock_time)" class="status-tag" :class="getStatusClass(item)">
              {{ getStatusText(item) }}
            </text>
          </view>
        </view>
        <view class="clock-actions">
          <button class="action-btn delete-btn" @click.stop="showDeleteMsgBox(item)">
            <uni-icons class="icon" type="trash" size="24" color="#ea5455" /> 删除
          </button>
        </view>
      </view>
      <view v-if="filteredClockIns.length === 0" class="empty-state">暂无打卡记录</view>
    </scroll-view>

    <!-- 添加打卡弹窗 -->
    <uni-popup ref="clockPopup" type="center">
      <view class="clock-modal">
        <view class="modal-header">
          <text class="modal-title">添加打卡</text>
          <text class="modal-close" @click="closeClockPopup">×</text>
        </view>
        <view class="modal-body">
          <view class="form-item">
            <text class="label">打卡用户</text>
            <view class="input">{{ userInfo.username }}</view>
          </view>
          <view class="form-item">
            <text class="label">打卡类型</text>
            <picker class="input" :range="clockTypes" @change="onClockTypeChange">
              <view>{{ form.clock_type == 1 ? '上班' : form.clock_type == 2 ? '下班' : '请选择打卡类型' }}</view>
            </picker>
          </view>
          <view class="form-item">
            <text class="label">打卡地点</text>
            <view class="location-input">
              <input class="input" v-model="form.clock_location" placeholder="请点击定位按钮获取位置" disabled />
              <view class="location-btn" @click="getLocation">
                <uni-icons type="location-filled" size="24" color="#ff7e2d" />
              </view>
            </view>
          </view>
          <view class="form-item">
            <text class="label">备注</text>
            <input class="input" v-model="form.remark" placeholder="请输入备注" />
          </view>
          <view class="form-item">
            <text class="label">打卡照片</text>
            <view class="photo-upload">
              <view class="photo-list">
                <image v-for="(photo, index) in form.photos" :key="index" :src="photo" class="photo-item" />
              </view>
              <button class="upload-btn" @click="takePhoto">
                <uni-icons class="icon" type="camera" size="32" color="#ff7e2d" /> 拍照
              </button>
            </view>
          </view>
        </view>
        <view class="modal-footer">
          <button class="cancel-btn" @click="closeClockPopup">取消</button>
          <button class="confirm-btn" @click="submitClockIn">确认</button>
        </view>
      </view>
    </uni-popup>

    <!-- 打卡详情弹窗 -->
    <uni-popup ref="detailPopup" type="center">
      <view class="clock-modal">
        <view class="modal-header">
          <text class="modal-title">打卡详情</text>
          <text class="modal-close" @click="closeDetailPopup">×</text>
        </view>
        <view class="modal-body">
          <view class="detail-item">
            <text class="label">打卡用户</text>
            <text class="value">{{ currentClockIn.user?.username || userInfo.username }}</text>
          </view>
          <view class="detail-item">
            <text class="label">打卡类型</text>
            <text class="value">{{ currentClockIn.clock_type }}</text>
          </view>
          <view class="detail-item">
            <text class="label">打卡时间</text>
            <text class="value">{{ formatDateTime(currentClockIn.clock_time) }}</text>
          </view>
          <view class="detail-item">
            <text class="label">打卡地点</text>
            <text class="value">{{ currentClockIn.clock_location || '-' }}</text>
          </view>
          <view class="detail-item">
            <text class="label">备注</text>
            <text class="value">{{ currentClockIn.remark || '-' }}</text>
          </view>
          <view class="detail-item">
            <text class="label">打卡照片</text>
            <view class="photo-content">
              <template v-if="currentClockIn.photos && currentClockIn.photos.length > 0">
                <view class="photo-list">
                  <image 
                    v-for="photo in currentClockIn.photos" 
                    :key="photo.id" 
                    :src="getPhotoUrl(photo.photo)" 
                    class="photo-item"
                    mode="aspectFill"
                    @click="previewImage(photo.photo)"
                  />
                </view>
              </template>
              <view v-else class="no-photo">
                <uni-icons type="camera-filled" size="40" color="#ddd" />
                <text>暂无打卡照片</text>
              </view>
            </view>
          </view>
        </view>
        <view class="modal-footer">
          <button class="confirm-btn" @click="closeDetailPopup">关闭</button>
        </view>
      </view>
    </uni-popup>

    <!-- 删除消息框 -->
    <message-box
      v-model="deleteMsgBoxVisible"
      title="确认删除"
      content="确定要删除这条打卡记录吗？"
      :show-cancel="true"
      confirm-text="删除"
      cancel-text="取消"
      @confirm="onDeleteClockInConfirm"
    />

    <!-- 上班/下班后要做的事情弹窗 -->
    <uni-popup ref="todoPopup" type="center">
      <view class="todo-modal">
        <view class="todo-header">
          <text class="todo-title">{{ todoType === 1 ? '上班' : '下班' }}后要做的事情</text>
          <text class="todo-close" @click="closeTodoPopup">×</text>
        </view>
        <scroll-view class="todo-body" scroll-y>
          <view v-if="todoList.length === 0" class="todo-empty">暂无事项，请添加</view>
          <view v-else class="todo-list">
            <view v-for="(item, idx) in todoList" :key="idx" class="todo-item">
              <view class="todo-checkbox" @click="toggleTodoComplete(idx)">
                <uni-icons 
                  :type="item.completed ? 'checkbox-filled' : 'circle'" 
                  size="28" 
                  :color="item.completed ? '#ff7e2d' : '#ccc'"
                />
              </view>
              <text class="todo-text" :class="{ 'completed': item.completed }">{{ item.text }}</text>
              <text class="todo-remove" @click="removeTodo(idx)">×</text>
            </view>
          </view>
          <view class="todo-input-row">
            <input v-model="todoInput" class="todo-input" placeholder="添加新事项" @keyup.enter="addTodo" />
            <button class="todo-add-btn" @click="addTodo">添加</button>
          </view>
        </scroll-view>
        <view class="todo-footer">
          <button class="todo-save-btn" @click="saveTodoList">保存</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { IntranetConfig, UserConfig } from '@/static/js/config'
import MessageBox from '@/components/message-box/message-box.vue'

// 获取当前用户信息
const userInfo = computed(() => UserConfig.getUserInfo())

const clockIns = ref([])
const clockPopup = ref(null)
const detailPopup = ref(null)
const form = ref({ 
  user: null, 
  clock_type: null, 
  clock_location: '', 
  remark: '', 
  photos: [] 
})
const deleteMsgBoxVisible = ref(false)
let clockInToDelete = null
const currentClockIn = ref({})
const clockTypes = ['上班', '下班']

// 添加腾讯地图配置
const mapKey = 'J4ZBZ-EH5LL-S2ZPH-EA7WG-JO2NO-B4FAL' // 腾讯地图 key

// 添加日期筛选相关
const selectedDate = ref(new Date().toISOString().split('T')[0])

// 上班/下班后要做的事情弹窗相关
const todoPopup = ref(null)
const todoType = ref(1) // 1=上班，2=下班
const todoList = ref([])
const todoInput = ref('')

// 卡片展示相关
const todoCardType = ref(1) // 1=上班，2=下班
const todoCardList = ref([])

function refreshTodoCardList() {
  const allTodo = uni.getStorageSync('clockInTodoList') || {}
  const date = selectedDate.value
  const completed = uni.getStorageSync('clockInTodoCompleted') || {}
  const list = Array.isArray(allTodo[todoCardType.value]) ? allTodo[todoCardType.value] : []
  todoCardList.value = list.map(item => ({
    text: item.text,
    completed: completed[date]?.[todoCardType.value]?.[item.text] || false
  }))
}

// 获取打卡列表
async function getClockInList() {
  try {
    const res = await uni.request({
      url: IntranetConfig.domain + 'api/users/clockIn/get_current_user_clock_in_list/',
      method: 'GET',
      header: IntranetConfig.headers,
      data: {
        user_id: userInfo.value.id
      }
    })
    if (res.data.code === 200) {
      clockIns.value = res.data.data
    } else {
      clockIns.value = []
    }
  } catch (error) {
    clockIns.value = []
    uni.showToast({ title: '获取失败', icon: 'error' })
  }
}

function openAddPopup() {
  // 设置当前用户为打卡用户
  form.value = { 
    user: userInfo.value, 
    clock_type: null, 
    clock_location: '', 
    remark: '', 
    photos: [] 
  }
  clockPopup.value.open()
}

function closeClockPopup() {
  clockPopup.value.close()
}

function onClockTypeChange(e) {
  form.value.clock_type = e.detail.value === 0 ? 1 : 2
}

async function takePhoto() {
  try {
    const res = await uni.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['camera']
    })
    console.log('拍照成功，临时文件路径:', res.tempFilePaths[0])
    form.value.photos.push(res.tempFilePaths[0])
  } catch (error) {
    console.error('拍照失败:', error)
    uni.showToast({ title: '拍照失败', icon: 'error' })
  }
}

function formatDateTime(dateStr) {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

function getPhotoUrl(photoPath) {
  if (!photoPath) return ''
  // 如果是完整的URL就直接返回
  if (photoPath.startsWith('http')) return photoPath
  // 否则拼接baseUrl
  return IntranetConfig.domain + photoPath
}

function previewImage(photoUrl) {
  if (!photoUrl) return
  uni.previewImage({
    urls: [getPhotoUrl(photoUrl)],
    current: 0,
    fail: (err) => {
      console.error('预览图片失败:', err)
      uni.showToast({
        title: '预览图片失败',
        icon: 'none'
      })
    }
  })
}

async function submitClockIn() {
  if (!form.value.user) {
    uni.showToast({ title: '请选择用户', icon: 'none' })
    return
  }
  if (!form.value.clock_type) {
    uni.showToast({ title: '请选择打卡类型', icon: 'none' })
    return
  }
  if (!form.value.clock_location) {
    uni.showToast({ title: '请输入打卡地点', icon: 'none' })
    return
  }
  
  uni.showLoading({ title: '打卡中...' })
  try {
    console.log('开始创建打卡记录，表单数据:', {
      user: form.value.user.id,
      clock_type: form.value.clock_type,
      clock_location: form.value.clock_location,
      remark: form.value.remark
    })

    const res = await uni.request({
      url: IntranetConfig.domain + 'api/users/clockIn/create_clock_in/',
      method: 'POST',
      header: IntranetConfig.headers,
      data: {
        user: form.value.user.id,
        clock_type: form.value.clock_type,
        clock_location: form.value.clock_location,
        remark: form.value.remark
      }
    })

    console.log('创建打卡记录响应:', res.data)

    if (res.data.code === 200) {
      const clockInId = res.data.data
      console.log('打卡记录创建成功，ID:', clockInId)

      // 上传照片
      if (form.value.photos.length > 0) {
        console.log('开始上传照片，数量:', form.value.photos.length)
        
        for (let i = 0; i < form.value.photos.length; i++) {
          const photo = form.value.photos[i]
          console.log(`开始上传第 ${i + 1} 张照片(ID:${clockInId}):`, photo)
          
          try {
            const uploadRes = await uni.uploadFile({
              url: IntranetConfig.domain + 'api/users/clockIn/upload_clock_in_photo/',
              filePath: photo,
              name: 'photo',
              formData: {
                clock_in: clockInId
              },
              header: {
                ...IntranetConfig.headers,
                'Content-Type': 'multipart/form-data'
              }
            })
            
            console.log(`第 ${i + 1} 张照片上传响应:`, uploadRes)
            
            // 检查上传响应
            const uploadResult = JSON.parse(uploadRes.data)
            if (uploadResult.code !== 200) {
              throw new Error(uploadResult.msg || '照片上传失败')
            }
          } catch (uploadError) {
            console.error(`第 ${i + 1} 张照片上传失败:`, uploadError)
            throw new Error(`第 ${i + 1} 张照片上传失败: ${uploadError.message}`)
          }
        }
        
        console.log('所有照片上传完成')
      }

      uni.showToast({ title: '打卡成功', icon: 'success' })
      closeClockPopup()
      getClockInList()
      // 打卡成功后弹出事项弹窗
      showTodoPopup(form.value.clock_type)
    } else {
      throw new Error(res.data.msg || '打卡失败')
    }
  } catch (error) {
    console.error('打卡失败:', error)
    uni.showToast({ 
      title: error.message || '打卡失败', 
      icon: 'error',
      duration: 3000
    })
  } finally {
    uni.hideLoading()
  }
}

function openDetailPopup(item) {
  // 确保用户信息正确显示
  currentClockIn.value = {
    ...item,
    user: {
      username: userInfo.value.username,
      ...item.user
    }
  }
  detailPopup.value.open()
}

function closeDetailPopup() {
  detailPopup.value.close()
}

function showDeleteMsgBox(item) {
  clockInToDelete = item
  deleteMsgBoxVisible.value = true
}

async function onDeleteClockInConfirm() {
  if (!clockInToDelete) return
  try {
    const res = await uni.request({
      url: IntranetConfig.domain + `api/users/clockIn/delete_clock_in/${clockInToDelete.id}/`,
      method: 'DELETE',
      header: IntranetConfig.headers
    })
    if (res.data.code === 200) {
      uni.showToast({ title: '删除成功', icon: 'success' })
      getClockInList()
    } else {
      throw new Error(res.data.msg)
    }
  } catch (error) {
    uni.showToast({ title: error.message || '删除失败', icon: 'error' })
  } finally {
    deleteMsgBoxVisible.value = false
    clockInToDelete = null
  }
}

// 修改定位函数
async function getLocation() {
  console.log('点击了定位按钮')
  try {
    uni.showLoading({ title: '定位中...' })
    
    // 使用uni-app原生定位API，使用wgs84坐标系
    const location = await new Promise((resolve, reject) => {
      uni.getLocation({
        type: 'wgs84', // 使用wgs84坐标系
        isHighAccuracy: true, // 开启高精度定位
        highAccuracyExpireTime: 3000, // 超时时间，单位ms
        success: (res) => {
          console.log('定位成功:', res)
          resolve({
            lat: res.latitude,
            lng: res.longitude
          })
        },
        fail: (err) => {
          console.error('定位失败:', err)
          // 如果高精度定位失败，尝试普通定位
          uni.getLocation({
            type: 'wgs84', // 使用wgs84坐标系
            success: (res) => {
              console.log('普通定位成功:', res)
              resolve({
                lat: res.latitude,
                lng: res.longitude
              })
            },
            fail: (error) => {
              console.error('普通定位也失败:', error)
              reject(new Error('定位失败，请检查定位权限'))
            }
          })
        }
      })
    })
    
    console.log('获取位置成功:', location)
    
    // 调用腾讯地图API获取详细地址
    const address = await getAddressFromLocation(location.lat, location.lng)
    form.value.clock_location = address
    
    uni.hideLoading()
    uni.showToast({ 
      title: '定位成功', 
      icon: 'success',
      duration: 2000
    })
  } catch (error) {
    console.error('定位失败:', error)
    uni.hideLoading()
    uni.showToast({ 
      title: error.message || '定位失败，请检查定位权限', 
      icon: 'error',
      duration: 3000
    })
  }
}

// 添加经纬度转地址函数
async function getAddressFromLocation(latitude, longitude) {
  try {
    // 使用腾讯地图坐标转换API，将wgs84坐标转换为gcj02坐标
    const convertUrl = `https://apis.map.qq.com/ws/coord/v1/translate?locations=${latitude},${longitude}&type=1&key=${mapKey}`
    console.log('请求坐标转换:', convertUrl)
    
    const convertRes = await uni.request({
      url: convertUrl,
      method: 'GET',
      header: {
        'Content-Type': 'application/json'
      }
    })
    
    console.log('坐标转换响应:', convertRes.data)
    
    if (convertRes.data.status !== 0) {
      throw new Error(convertRes.data.message || '坐标转换失败')
    }
    
    const convertedLocation = convertRes.data.locations[0]
    console.log('转换后的坐标:', convertedLocation)
    
    // 使用转换后的坐标获取地址
    const url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${convertedLocation.lat},${convertedLocation.lng}&key=${mapKey}&get_poi=1&radius=100`
    console.log('请求腾讯地图API:', url)
    
    const res = await uni.request({
      url: url,
      method: 'GET',
      header: {
        'Content-Type': 'application/json'
      }
    })
    
    console.log('腾讯地图API响应:', res.data)
    
    if (res.data.status === 0 && res.data.result) {
      // 获取更详细的地址信息
      const result = res.data.result
      const address = result.address
      const poi = result.pois && result.pois[0] ? result.pois[0].title : ''
      const formattedAddress = poi ? `${poi} - ${address}` : address
      console.log('解析到的地址:', formattedAddress)
      return formattedAddress
    } else {
      throw new Error(res.data.message || '地址解析失败')
    }
  } catch (error) {
    console.error('地址解析失败:', error)
    throw new Error(error.message || '地址解析失败')
  }
}

// 格式化日期显示
function formatDate(dateStr) {
  const date = new Date(dateStr)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 日期选择变化处理
function onDateChange(e) {
  selectedDate.value = e.detail.value
  refreshTodoCardList()
}

// 判断是否是今天
function isToday(dateStr) {
  const today = new Date().toISOString().split('T')[0]
  return dateStr.startsWith(today)
}

// 获取打卡状态文本
function getStatusText(item) {
  if (!isToday(item.clock_time)) return ''
  
  const todayClockIns = clockIns.value.filter(clock => 
    isToday(clock.clock_time)
  )
  
  if (item.clock_type === 1) { // 上班打卡
    const hasClockOut = todayClockIns.some(clock => clock.clock_type === 2)
    return hasClockOut ? '已下班' : '上班中'
  }
  return ''
}

// 获取状态样式类
function getStatusClass(item) {
  if (!isToday(item.clock_time)) return ''
  
  const todayClockIns = clockIns.value.filter(clock => 
    isToday(clock.clock_time)
  )
  
  if (item.clock_type === 1) { // 上班打卡
    const hasClockOut = todayClockIns.some(clock => clock.clock_type === 2)
    return hasClockOut ? 'status-closed' : 'status-working'
  }
  return ''
}

// 根据日期筛选打卡记录
const filteredClockIns = computed(() => {
  return clockIns.value.filter(item => 
    item.clock_time.startsWith(selectedDate.value)
  )
})

function showTodoPopup(type) {
  todoType.value = type
  // 读取本地事项
  const allTodo = uni.getStorageSync('clockInTodoList') || {}
  todoList.value = Array.isArray(allTodo[type]) ? allTodo[type].map(item => ({
    text: item.text,
    completed: false
  })) : []
  todoPopup.value.open()
}

function closeTodoPopup() {
  todoPopup.value.close()
  todoInput.value = ''
}

function addTodo() {
  const text = todoInput.value.trim()
  if (!text) {
    uni.showToast({ title: '事项不能为空', icon: 'none' })
    return
  }
  if (text.length > 30) {
    uni.showToast({ title: '事项不能超过30字', icon: 'none' })
    return
  }
  if (todoList.value.some(item => item.text === text)) {
    uni.showToast({ title: '事项已存在', icon: 'none' })
    return
  }
  todoList.value.push({
    text,
    completed: false
  })
  todoInput.value = ''
}

function toggleTodoComplete(idx) {
  todoList.value[idx].completed = !todoList.value[idx].completed
}

function removeTodo(idx) {
  todoList.value.splice(idx, 1)
}

function saveTodoList() {
  const allTodo = uni.getStorageSync('clockInTodoList') || {}
  allTodo[todoType.value] = todoList.value.map(item => ({
    text: item.text
  }))
  uni.setStorageSync('clockInTodoList', allTodo)
  uni.showToast({ title: '已保存', icon: 'success' })
  refreshTodoCardList()
  closeTodoPopup()
}

function openEditTodoCard() {
  showTodoPopup(todoCardType.value)
}

// 卡片区勾选功能
function toggleCardTodoComplete(idx, item) {
  if (item.completed) return; // 已完成不允许取消
  uni.showModal({
    title: '确认完成',
    content: `确定已完成"${item.text}"吗？`,
    confirmText: '确定',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        const date = selectedDate.value
        const completed = uni.getStorageSync('clockInTodoCompleted') || {}
        if (!completed[date]) completed[date] = {}
        if (!completed[date][todoCardType.value]) completed[date][todoCardType.value] = {}
        completed[date][todoCardType.value][item.text] = true
        uni.setStorageSync('clockInTodoCompleted', completed)
        refreshTodoCardList()
      }
    }
  })
}

// 切换卡片类型时也要刷新
watch(todoCardType, () => {
  refreshTodoCardList()
})

// 页面加载时初始化
onMounted(() => {
  getClockInList()
  refreshTodoCardList()
})
</script>

<style lang="scss" scoped>
.clock-in-page, .clock-list {
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}
.clock-in-page {
  background: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx 40rpx 0 40rpx;
  .title {
    font-size: 40rpx;
    font-weight: 700;
    color: #222;
    letter-spacing: 1rpx;
  }
  .add-btn {
    background: linear-gradient(90deg, #ffb86c 0%, #ff7e2d 100%);
    color: #fff;
    border: none;
    border-radius: 22rpx;
    font-size: 32rpx;
    padding: 0 56rpx;
    height: 80rpx;
    font-weight: 700;
    box-shadow: 0 4rpx 16rpx rgba(255,126,45,0.12);
    display: flex;
    align-items: center;
    gap: 12rpx;
    transition: background 0.2s, box-shadow 0.2s;
    &:active {
      background: #ff7e2d;
      box-shadow: 0 2rpx 8rpx rgba(255,126,45,0.18);
    }
    .add-icon {
      font-size: 38rpx;
      margin-right: 2rpx;
    }
  }
}
.clock-list {
  margin: 40rpx 32rpx 0 32rpx;
  background: #fff;
  border-radius: 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(255,126,45,0.08);
  padding: 0 0 8rpx 0;
  min-height: 300rpx;
  max-height: 70vh;
  width: calc(100vw - 64rpx);
  box-sizing: border-box;
}
.clock-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1rpx solid #f5f5f5;
  padding: 40rpx 32rpx 0 32rpx;
  &:last-child {
    border-bottom: none;
  }
  .clock-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    .clock-id {
      font-size: 26rpx;
      color: #bbb;
      margin-bottom: 2rpx;
    }
    .clock-name {
      font-size: 36rpx;
      font-weight: 700;
      color: #333;
      margin-bottom: 2rpx;
    }
    .clock-desc {
      font-size: 28rpx;
      color: #888;
      max-width: 400rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .clock-actions {
    display: flex;
    flex-direction: column;
    gap: 18rpx;
    margin-left: 24rpx;
    .action-btn {
      display: flex;
      align-items: center;
      gap: 8rpx;
      border: none;
      border-radius: 20rpx;
      font-size: 28rpx;
      padding: 0 32rpx;
      height: 60rpx;
      font-weight: 600;
      box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
      cursor: pointer;
    }
    .delete-btn {
      background: #ffe4e4;
      color: #ea5455;
      &:active {
        background: #ffd6d6;
        color: #b80000;
      }
      .icon {
        font-size: 32rpx;
        color: #ea5455;
      }
    }
  }
}
.empty-state {
  text-align: center;
  color: #bbb;
  font-size: 30rpx;
  padding: 100rpx 0;
  letter-spacing: 1rpx;
}
.clock-modal {
  width: 92vw;
  max-width: 640rpx;
  background: #fff;
  border-radius: 36rpx;
  box-shadow: 0 12rpx 48rpx rgba(255,126,45,0.13);
  overflow: hidden;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  animation: fadeIn 0.2s;
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx 40rpx 0 40rpx;
  .modal-title {
    font-size: 38rpx;
    font-weight: 700;
    color: #333;
  }
  .modal-close {
    font-size: 48rpx;
    color: #bbb;
    padding: 10rpx;
    border-radius: 50%;
    transition: background 0.2s;
    &:active {
      background: #f5f5f5;
    }
  }
}
.modal-body {
  padding: 32rpx 40rpx 0 40rpx;
}
.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
  font-size: 32rpx;
  .label {
    color: #333;
    width: 180rpx;
    font-weight: 600;
    flex-shrink: 0;
  }
  .input {
    flex: 1;
    border: none;
    background: #f8f9fa;
    border-radius: 14rpx;
    padding: 20rpx 28rpx;
    font-size: 32rpx;
    color: #333;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
    transition: box-shadow 0.2s;
    &:focus {
      box-shadow: 0 4rpx 16rpx rgba(255,126,45,0.08);
      outline: none;
    }
  }
}
.location-input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16rpx;
  .input {
    flex: 1;
    border: none;
    background: #f8f9fa;
    border-radius: 14rpx;
    padding: 20rpx 28rpx;
    font-size: 32rpx;
    color: #333;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
    transition: box-shadow 0.2s;
    &:focus {
      box-shadow: 0 4rpx 16rpx rgba(255,126,45,0.08);
      outline: none;
    }
  }
  .location-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80rpx;
    height: 80rpx;
    background: #fff;
    border-radius: 14rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
    transition: all 0.2s;
    &:active {
      transform: scale(0.95);
      background: #f8f9fa;
    }
  }
}
.photo-upload {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  .photo-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    .photo-item {
      width: 160rpx;
      height: 160rpx;
      border-radius: 12rpx;
      object-fit: cover;
    }
  }
  .upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8rpx;
    background: #f8f9fa;
    border: 1rpx dashed #ddd;
    border-radius: 12rpx;
    padding: 20rpx;
    font-size: 28rpx;
    color: #666;
    transition: background 0.2s;
    &:active {
      background: #e0e0e0;
    }
  }
}
.detail-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32rpx;
  font-size: 32rpx;
  .label {
    color: #333;
    width: 180rpx;
    font-weight: 600;
    flex-shrink: 0;
  }
  .value {
    flex: 1;
    color: #666;
  }
  .photo-content {
    flex: 1;
    .photo-list {
      display: flex;
      flex-wrap: wrap;
      gap: 16rpx;
      .photo-item {
        width: 160rpx;
        height: 160rpx;
        border-radius: 12rpx;
        object-fit: cover;
        box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
        transition: transform 0.2s;
        &:active {
          transform: scale(0.98);
        }
      }
    }
    .no-photo {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12rpx;
      padding: 40rpx;
      background: #f8f9fa;
      border-radius: 12rpx;
      text {
        font-size: 28rpx;
        color: #999;
      }
    }
  }
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 32rpx;
  padding: 40rpx;
  border-top: 1rpx solid #f5f5f5;
  background: #fff;
  .cancel-btn {
    background: #f5f5f5;
    color: #666;
    border: none;
    border-radius: 16rpx;
    font-size: 32rpx;
    padding: 0 56rpx;
    height: 80rpx;
    font-weight: 500;
    transition: background 0.2s;
    &:active {
      background: #e0e0e0;
    }
  }
  .confirm-btn {
    background: linear-gradient(90deg, #ffb86c 0%, #ff7e2d 100%);
    color: #fff;
    border: none;
    border-radius: 16rpx;
    font-size: 32rpx;
    padding: 0 56rpx;
    height: 80rpx;
    font-weight: 700;
    transition: background 0.2s;
    &:active {
      background: #ff7e2d;
    }
  }
}
.filter-bar {
  padding: 20rpx 40rpx;
  .date-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 20rpx 32rpx;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
  }
}
.status-tag {
  display: inline-block;
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  margin-left: 16rpx;
  font-weight: 500;
}
.status-working {
  background: #e6f7ff;
  color: #1890ff;
}
.status-closed {
  background: #f6ffed;
  color: #52c41a;
}
.todo-modal {
  width: 90vw;
  max-width: 600rpx;
  background: #fff;
  border-radius: 28rpx;
  box-shadow: 0 12rpx 48rpx rgba(255,126,45,0.13);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  animation: fadeIn 0.2s;
}
.todo-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32rpx 32rpx 0 32rpx;
  border-bottom: 1rpx solid #f2f2f2;
  background: #fff;
  position: relative;
}
.todo-title {
  font-size: 36rpx;
  font-weight: 800;
  color: #ff7e2d;
  letter-spacing: 2rpx;
  text-align: center;
}
.todo-close {
  position: absolute;
  right: 32rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 44rpx;
  color: #bbb;
  padding: 10rpx;
  border-radius: 50%;
  transition: background 0.2s;
  cursor: pointer;
  &:active { background: #f5f5f5; }
}
.todo-body {
  padding: 24rpx 32rpx 8rpx 32rpx;
  min-height: 120rpx;
  max-height: calc(80vh - 180rpx);
  overflow-y: auto;
}
.todo-empty {
  color: #bbb;
  font-size: 28rpx;
  text-align: center;
  margin-bottom: 16rpx;
}
.todo-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 12rpx;
}
.todo-item {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 14rpx;
  padding: 0 0 0 0;
  font-size: 30rpx;
  color: #333;
  box-shadow: 0 2rpx 8rpx rgba(255,126,45,0.04);
  height: 72rpx;
  margin-bottom: 16rpx;
  .todo-checkbox {
    width: 56rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .todo-text {
    flex: 1;
    min-width: 0;
    font-size: 30rpx;
    line-height: 1.4;
    word-break: break-all;
    &.completed {
      text-decoration: line-through;
      color: #bbb;
    }
  }
  .todo-remove {
    width: 56rpx;
    text-align: center;
    color: #ff7e2d;
    font-size: 36rpx;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
    &:active { background: #ffe3cc; }
  }
}
.todo-input-row {
  display: flex;
  align-items: center;
  height: 72rpx;
  margin: 0 0 12rpx 0;
  padding: 0;
  .todo-input {
    flex-basis: 60%;
    max-width: 60%;
    min-width: 0;
    height: 100%;
    border-radius: 12rpx;
    border: 1rpx solid #ffd6b3;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #333;
    background: #fff6ed;
    box-shadow: 0 2rpx 8rpx rgba(255,126,45,0.04);
  }
  .todo-add-btn {
    flex-basis: 20%;
    max-width: 20%;
    min-width: 0;
    margin-left: 6%;
    background: linear-gradient(90deg, #ffb86c 0%, #ff7e2d 100%);
    color: #fff;
    border: none;
    border-radius: 12rpx;
    font-size: 28rpx;
    height: 100%;
    font-weight: 700;
    box-shadow: 0 2rpx 8rpx rgba(255,126,45,0.08);
    transition: background 0.2s;
    &:active { background: #ffae7b; }
  }
}
.todo-footer {
  display: flex;
  justify-content: center;
  padding: 24rpx 32rpx;
  border-top: 1rpx solid #f5f5f5;
  background: #fff;
  .todo-save-btn {
    background: linear-gradient(90deg, #ffb86c 0%, #ff7e2d 100%);
    color: #fff;
    border: none;
    border-radius: 16rpx;
    font-size: 30rpx;
    padding: 0 48rpx;
    height: 64rpx;
    font-weight: 700;
    transition: background 0.2s;
    &:active { background: #ff7e2d; }
  }
}
.todo-card {
  margin: 32rpx 32rpx 0 32rpx;
  background: #fff6ed;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(255,126,45,0.08);
  padding: 24rpx 32rpx 18rpx 32rpx;
  max-height: 40vh;
  overflow-y: auto;
  .todo-card-tabs {
    display: flex;
    align-items: center;
    gap: 24rpx;
    margin-bottom: 12rpx;
    .todo-card-tab {
      font-size: 28rpx;
      color: #ff7e2d;
      padding: 4rpx 18rpx;
      border-radius: 16rpx;
      background: #fff;
      font-weight: 600;
      cursor: pointer;
      &.active {
        background: linear-gradient(90deg, #ffb86c 0%, #ff7e2d 100%);
        color: #fff;
      }
    }
    .todo-card-edit {
      margin-left: auto;
      font-size: 26rpx;
      color: #999;
      cursor: pointer;
      padding: 4rpx 12rpx;
      border-radius: 12rpx;
      transition: background 0.2s;
      &:active { background: #ffe3cc; }
    }
  }
  .todo-card-empty {
    color: #bbb;
    font-size: 26rpx;
    text-align: center;
    padding: 16rpx 0;
  }
  .todo-card-list {
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    .todo-card-item {
      display: flex;
      align-items: center;
      gap: 8rpx;
      font-size: 28rpx;
      color: #333;
      background: transparent;
      .todo-card-checkbox {
        margin-right: 8rpx;
        padding: 4rpx;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .todo-card-text {
        flex: 1;
        min-width: 0;
        word-break: break-all;
        font-size: 28rpx;
        line-height: 1.4;
        &.completed {
          text-decoration: line-through;
          color: #999;
        }
      }
    }
  }
}
</style> 